<template>
	<view class="box">
		<u-collapse :accordion="accordion">
		    <u-collapse-item :title="item.name" :class="item.name == '中医四诊-望' ? 'hopeClass' : item.name == '中医四诊-闻' ? 'smellClass' : 'cutClass'" v-for="(item,index) in collapseData" :key="index" :show-animation="true">
		        <view class="theTitle one" v-for="(aitem,aindex) in item.data" :key="aindex">
		            <view class="one">
						<view>{{aindex+1}}</view>
						<span>{{aitem.title}}</span>
					</view>
					<view class="selectBox">
						<view :class="!aitem.options[0].option?'allTitle':'allTitle2'" v-for="(itemTow,indexTow) in aitem.options" :key="indexTow" >
							<view v-if="!aitem.options[0].option">
								<image :src="itemTow.checked ? '../../../static/img/questionnaire/checked.png':'../../../static/img/questionnaire/noChecked.png'" class="checked"></image>
								<span>{{itemTow.title}}</span>
							</view>
							<view v-else>
								<view>
									<span>{{itemTow.smallTitle}}</span>
								</view>
								<view class="selectBoxTwo">
									<view v-for="(bitem,bindex) in aitem.options[indexTow].option" :key="bindex" class="allTitle">
										<image :src="bitem.checked ? '../../../static/img/questionnaire/checked.png':'../../../static/img/questionnaire/noChecked.png'" class="checked"></image>
										<span>{{bitem.title}}</span>
									</view>
								</view>
							</view>
						</view>
					</view>
		        </view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script>
	import {getUrlParam} from '@/static/js/filter.js'
	const TCMdata = require('@/pages/monitor/tcm/createTCM.json')
	export default {
		 data() {
			return {
				activeNames: ['1'],
				result:[],
				collapseData :TCMdata,
				accordion: true,
			}
		},
		created() {
			if(getUrlParam("id")) {
				const id = getUrlParam("id");
				this.$api.chineseMedicineDetails(id).then((res) => {
					if(res.data.returnCode == '200') {
						res.data.result.appFourDiagnosticEntities.map((a)=>{
							this.collapseData.map((b)=>{
								b.data.map((c)=>{
									if(c.type == a.type){
										c.options.map((d)=>{
											if(d.title == a.name){
												d.checked = true
											}
											if(d.option){
												d.option.map((e)=>{
													if(e.title == a.name){
														console.log(e)
														e.checked = true
													}
												})
											}
										})
									}
								})
							})
						})
					}
				})
			}
			
		},
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750upx;
		padding: 0 24upx;
		background-color: #F8F8F8;
		min-height: calc(100vh - 44px);
		box-sizing: border-box;
		/deep/ .u-collapse-body {
			height: 100%;
		}
		u-collapse {
			width: 702upx;
			margin: 0 24upx;
			background-color: #FFFFFF;
		}
		.theTitle {
			padding:0 20upx;
			background-color: #F8F8F8;
			.one {
				margin-top: 39upx;
				display: flex;
				align-items: center;
				view {
					background: url(../../../static/img/questionnaire/titleIcon.png) no-repeat;
					background-size: 100% 100%;
					width: 52upx;
					height: 24upx;
					color: #FFFFFF;
					font-size: 20upx;
					text-align: center;
					line-height: 24upx;
					margin-right: 10upx;
				}
				span {
					color: #333333;
					font-size: 30upx;
					font-weight: 600;
					flex: 1;
				}
			}
		}
		.selectBox,
		.selectBoxTwo {
			display: flex;
			flex-wrap: wrap;
			align-items: center;	
			margin: 0 26upx;
			.allTitle {
				width: 33%;
				margin-top: 32upx;		
				view {				
					image {
						width: 24upx;
						height: 24upx;
						margin-right: 8upx;
					}
					span {
						color: #333333;
						font-size: 28upx;
					}
				}
			}
			.allTitle2 {
				width: 100%;
				margin-top: 32upx;		
				view {				
					image {
						width: 24upx;
						height: 24upx;
						margin-right: 8upx;
					}
					span {
						color: #333333;
						font-size: 28upx;
					}
				}
			}
		}
		.selectBoxTwo {
			margin: 0;
		}
		/deep/ .uni-collapse-cell .uni-collapse-cell__title {
			background: rgba(0,0,0,0);
		}
		
		/deep/.uni-collapse-cell__title .uni-collapse-cell__title-arrow {
			color: #999999 !important;
		}
		
		/deep/ .hopeClass .u-collapse-head {
			background: url(../../../static/img/questionnaire/hope@2x.png) no-repeat;
			background-size: 100% 100%;
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;
			padding: 0 0 0 24upx;
			height: 88upx;
		}
		
		/deep/ .smellClass .u-collapse-head {
			background: url(../../../static/img/questionnaire/smell@2x.png) no-repeat;
			background-size: 100% 100%;
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;
			padding: 0 0 0 24upx;
			height: 88upx;
		}
		
		/deep/ .cutClass .u-collapse-head {
			background: url(../../../static/img/questionnaire/cut@2x.png) no-repeat;
			background-size: 100% 100%;
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;
			padding: 0 0 0 24upx;
			height: 88upx;
		}
		
		/deep/ .uni-collapse-cell.hopeClass .uni-collapse-cell__title {
			background: url(../../../static/img/questionnaire/hope@2x.png) no-repeat;
			background-size: 100% 100%;
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;
		}
		
		/deep/ .uni-collapse-cell.smellClass .uni-collapse-cell__title {
			background: url(../../../static/img/questionnaire/smell@2x.png) no-repeat;
			background-size: 100% 100%;
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;
		}
		
		/deep/ .uni-collapse-cell.cutClass .uni-collapse-cell__title {
			background: url(../../../static/img/questionnaire/cut@2x.png) no-repeat;
			background-size: 100% 100%;
			width: 100%;
			box-sizing: border-box;
			overflow: hidden;
		}
		/deep/ .u-collapse-item:first-child {
			margin-top: 0;
			padding-top: 30upx;
		}
		
		/deep/ .u-collapse-item {
			margin-top: 24upx;
		}
	}
</style>
